<template>
<f7-login-screen>
  <f7-page login-screen>
    <a class="close-login-screen">
      <f7-icon f7="close" class="if-close"></f7-icon>
    </a>
    <f7-buttons>
      <f7-button tab-link="#tab-login" active>登录</f7-button>
      <f7-button tab-link="#tab-reg">注册</f7-button>
    </f7-buttons>
    <f7-tabs animated>
      <f7-tab id="tab-login" active>
        <f7-list form>
          <f7-list-item>
            <f7-label>手机号</f7-label>
            <f7-input v-model="phonenum2" type="tel" placeholder="请输入手机号"></f7-input>
          </f7-list-item>
          <f7-list-item>
            <f7-label>密　码</f7-label>
            <f7-input v-model="pwd2" type="password" placeholder="请输入密码"></f7-input>
          </f7-list-item>
        </f7-list>
        <f7-button big fill @click.native="login">登录</f7-button>
      </f7-tab>
      <f7-tab id="tab-reg">
        <f7-list form>
          <f7-list-item>
            <f7-label>手机号</f7-label>
            <f7-input v-model="phonenum1" type="tel" placeholder="请输入手机号"></f7-input>
          </f7-list-item>
          <f7-list-item>
            <f7-label>密　码</f7-label>
            <f7-input v-model="pwd1" type="password" placeholder="请输入密码"></f7-input>
          </f7-list-item>
          <f7-list-item>
            <f7-label>邮　箱</f7-label>
            <f7-input v-model="email1" type="email" placeholder="请输入邮箱"></f7-input>
          </f7-list-item>
        </f7-list>
        <f7-button big fill @click.native="reg">注册</f7-button>
      </f7-tab>
    </f7-tabs>
  </f7-page>
</f7-login-screen>
</template>

<script>
export default {
  name: 'app-login',
  data() {
    return {
      phonenum1: '',
      pwd1: '',
      email1: '',
      phonenum2: '',
      pwd2: ''
    }
  },
  methods: {
    reg() {
      const { phonenum1, pwd1, email1 } = this
      $.fetch('reg', {
        phonenum: phonenum1,
        pwd: pwd1,
        email: email1
      }).then(data => {
        if (data == 0) {
          toast.show('注册成功')
          f7.showTab('#tab-login')
        } else {
          toast.show({
            [-1]: '数据服务器忙，稍后再试',
            [-2]: '已存在用户，不能再用该手机号注册',
            [-3]: '所有空必填',
          }[data])
        }
      })
    },
    login() {
      const { phonenum2, pwd2 } = this
      $.fetch('reg', {
        phonenum: phonenum2,
        pwd: pwd2
      }).then(data => {
        if (data == 0) {
          toast.show('登录成功')
          f7.closeModal('.login-screen')
        } else {
          toast.show({
            [-1]: '帐号必须为数字',
            [-2]: '帐号或密码，有错',
            [-3]: '数据集保存出错',
            [-4]: '查询数据库出错，稍后再试',
          }[data])
        }
      })
    }
  }
}
</script>

<style lang="scss">
.login-screen {
  .if-close {
    width: 32px;
    font-size: 32px;
    position: absolute;
    top: 12px;
    left: 12px;
  }
}
.login-screen-content {
  padding-top: 100px;

  .list-block {
    padding: 0 5px;

    .item-content {
      padding-right: 15px;
    }
  }

  .buttons-row {
    .button.tab-link {
      background-color: transparent;
      border: none;
      color: #9e9e9e;

      &.active {
        color: #ff9800;
        position: relative;
      }
    }
  }

  .button-fill {
    margin: 0 20px;
  }
}
</style>
